<!-- TOPBAR S -->
<header class="top-bar flex-row">
  <div class="row-item row-item-auto top-bar-back top-bar-search">搜索</div>
  <div class="row-item">
    <form action="__CONTROLLER__/list">
      <input class="search" name="keywords" type="search" placeholder="搜索商品名称、品牌、功效">
      <input type="hidden" name="sid" value="{$sid}">
    </form>
  </div>
</header>
<!-- TOPBAR E -->

<!-- 轮播图 S -->
<header id="slide" class="slide">
  <ul class="slide-image">
  <tag:shopSlide id="vo">
  <li>
    <a href="{$vo.url}"><img src="{$vo.img}" alt="{$vo.title}"></a>
    <h3>{$vo.title}</h3>
  </li>
  </tag:shopSlide>
  </ul>
</header>
<!-- 轮播图 E -->

<!-- 主图标导航 S -->
<section class="index-nav index-block">

  <tag:shopCategory id="vo">
    <if condition="($index-1)%4 eq 0"><div class="flex-row"></if>
      <a class="row-item" href="{$vo.url}">
        <img src="{$vo.logo}" alt="">
        <p>{$vo.name}</p>
      </a>
    <if condition="$index%4 eq 0"></div></if>
  </tag:shopCategory>
  <if condition="$index%4 neq 0"></div></if>

</section>
<!-- 主图标导航 E -->

<!-- 活动区 S -->
<section class="index-activity index-block">

  <ul class="justify">
    <tag:shopHotWords id="vo" limit="6">
    <li class="justify-item index-activity-item">
      <a href="{$vo.url}"><img class="w100" src="{$vo.image}" alt=""></a>
    </li>
    </tag:shopHotWords>
  </ul>
  
</section>
<!-- 活动区 E -->

<!-- 品牌推荐 S -->
<section class="index-recommend index-block list-block">
  <h3 class="list-block-title">品牌推荐</h3>
  
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <tag:shopBrandRecommend id="vo">
      <if condition="$index%8==1"><div class="swiper-slide"></if>
      <a class="index-recommend-a" href="{$vo.url}"><img class="w100" src="{$vo.logo}" alt=""></a>
      <if condition="$index%8==0"></div></if>
      </tag:shopBrandRecommend>

    </div>
  </div>

</section>
<!-- 品牌推荐 E -->

<!-- TOP榜 S -->
<section class="index-top index-block list-block">

  <h3 class="list-block-title">TOP榜</h3>
  
  <tag:shopGoods id="vo" order="saled_count desc" limit="10">
  <div class="shop-list">
    <a class="flex-row flex-row-top" href="{$vo.url}">
      <div class="row-item row-item-3">
        <img class="shop-list-shop w100" src="{$vo.thumb_img}" alt="">
      </div>
      <div class="row-item row-item-7 shop-list-summary">
        <h3 class="shop-list-name">{$vo.name}</h3>
        <p class="shop-list-price ellipsis">
          <strong class="now-price">{$vo.price}</strong>
          <del class="original-price">{$vo.price_high}</del>
          <span class="discount">
          <if condition="$vo['is_low']">
          	 {$vo['price_low']/$vo['price_high']*10|sprintf='%.2f',###|substr=0,-1}折
          <else/>
          	 {$vo['price']/$vo['price_high']*10|sprintf='%.2f',###|substr=0,-1}折
          </if>
          </span>
        </p>
        <p class="shop-list-num">{$vo['saled_base']+$vo['saled_count']}人购买</p>
      </div>
    </a>
  </div>
  </tag:shopGoods>

</section>
<!-- TOP榜 E -->

<!-- 促销商品 S -->
<section class="index-top index-block list-block">

  <h3 class="list-block-title">聚惠栏</h3>

  <tag:shopGoods id="vo" is_low="1" order="saled_count desc">
  <div class="shop-list">
    <a class="flex-row flex-row-top" href="{$vo.url}">
      <div class="row-item row-item-3">
        <img class="shop-list-shop w100" src="{$vo.thumb_img}" alt="">
      </div>
      <div class="row-item row-item-7 shop-list-summary">
        <h3 class="shop-list-name">{$vo.name}</h3>
        <p class="shop-list-price ellipsis">
          <strong class="now-price">{$vo.price}</strong>
          <del class="original-price">{$vo.price_high}</del>
          <span class="discount">
          <if condition="$vo['is_low']">
          	 {$vo['price_low']/$vo['price_high']*10|sprintf='%.2f',###|substr=0,-1}折
          <else/>
          	 {$vo['price']/$vo['price_high']*10|sprintf='%.2f',###|substr=0,-1}折
          </if>
          </span>
        </p>
        <p class="shop-list-num">{$vo['saled_base']+$vo['saled_count']}人购买</p>
      </div>
    </a>
  </div>
  </tag:shopGoods>

</section>
<!-- 促销商品 E -->


<script type="text/javascript">
  $(function(){

    storage({
      item: "slide",
      have: function( item ) {
        $("<script>").text(item).appendTo( $("body") );
        mySlide( $("#slide").get(0) );
      },
      nohave: ajaxGetJs
    });

    function ajaxGetJs() {
      $.get("__COMMON__/js/2/slide.min.js", function(slideContent){
        $("<script>").text(slideContent).appendTo( $("body") );
        try{
          window.localStorage.setItem( "slide", slideContent );
        } catch( e ) {
          console.log( e );
        }
        mySlide( $("#slide").get(0) );
      });
    };
    
    $(".search").on("focus", function(){
      $(".top-bar-search").addClass("hide");
    });
    $(".search").on("blur", function(){
      $(".top-bar-search").removeClass("hide");
    });

    var w = $(".swiper-container").width()/4;
    $(".swiper-container,.swiper-wrapper,.swiper-slide").height(w*1.5);

    var mySwiper = $(".swiper-container").swiper({
      mode:'horizontal'
    });

  });
</script>